<!-- 页面侧边栏，独立代码，非组件 -->
<template>
  <div id='menu'
       @contextmenu.stop.prevent="contextmenuHandle"
       class="oh">
    <!-- :default-openeds="['1']" -->
    <div class="menu-box">
      <el-menu width="180px"
               @select="handleClickMenu"
               @open="handleOpenMenu">
        <el-menu-item index="1">
          <img :src="active==1?'../../static/svg/photo.svg':'../../static/svg/photo-no.svg'"
               alt=""
               class="me-img">
          <span slot="title">最近使用</span>
        </el-menu-item>
        <el-menu-item index="2">
          <img :src="active==2?'../../static/svg/folder.svg':'../../static/svg/folder-no.svg'"
               alt=""
               class="me-img">
          <span slot="title">全部文件</span>
        </el-menu-item>

        <!-- <el-submenu index="1">
          <template slot="title"><img :src="active==1?'
            ../../static/svg/folder.svg':'../../static/svg/folder-no.svg'"
                 alt=""
                 class="me-img"> <span>全部文件</span></template>
          <el-menu-item index="1"><img :src="active==1?'
            ../../static/svg/folder.svg':'../../static/svg/folder-no.svg'"
                 alt=""
                 class="me-img"><span>加班记录</span></el-menu-item>
          <el-menu-item index="1"><img :src="active==1?'
            ../../static/svg/folder.svg':'../../static/svg/folder-no.svg'"
                 alt=""
                 class="me-img"><span>DemoShare</span></el-menu-item>
          <el-menu-item index="1"><img :src="active==1?'
            ../../static/svg/folder.svg':'../../static/svg/folder-no.svg'"
                 alt=""
                 class="me-img"><span>Photos</span></el-menu-item>
        </el-submenu> -->
        <el-menu-item index="3">
          <img :src="active==3?'../../static/svg/file.svg':'../../static/svg/file-no.svg'"
               alt=""
               class="me-img">
          <span slot="title">文档</span>
        </el-menu-item>
        <el-menu-item index="4">
          <img :src="active==4?'../../static/svg/photo.svg':'../../static/svg/photo-no.svg'"
               alt=""
               class="me-img">
          <span slot="title">相册</span>
        </el-menu-item>
        <el-menu-item index="5">
          <img :src="active==5?'../../static/svg/music.svg':'../../static/svg/music-no.svg'"
               alt=""
               class="me-img">
          <span slot="title">音乐</span>
        </el-menu-item>
        <!--        <el-menu-item index="6">
          <img :src="active==6?'../../static/svg/cloud.svg':'../../static/svg/cloud-no.svg'"
               alt=""
               class="me-img">
          <span slot="title">我的云盘</span>
        </el-menu-item>-->
      </el-menu>
    </div>
    <div class="menu-footer">
      <div :class="active==7?'delete delete-select':'delete '"
           @click="handleClickMenu(7)">
        <img :src="active==7?'../../static/svg/delete.svg':'../../static/svg/delete-no.svg'"
             alt=""
             class="me-img">
        <span class="delete-spa">已删除文件</span>
      </div>
      <div class="storage">
        <div class="storage-mess">
          <span class="me-font">12MB已用</span>
          <span class="me-font">共1G</span>
        </div>
        <el-progress :percentage="97"
                     :show-text="false"
                     :color="customColors"></el-progress>
      </div>
    </div>
  </div>
</template>

<script>

// import
export default {
  props: ['showAll', 'showDelete'],
  components: {},
  data() {
    return {
      active: 0,
    };
  },
  created() {

  },
  mounted() {
    this.handleClickMenu(2); // 初始化列表显示
  },
  computed: {},
  watch: {},
  methods: {
    handleClickMenu(index) {
      this.active = index;
      this.$emit('clickMenu', index);
    },
    handleOpenMenu(index) {
      // console.log(index);
      this.active = index;
    },
    customColors(percentage) {
      if (percentage < 80) {
        return '#51A8FF';
      } if (percentage < 90) {
        return '#2200AA';
      } if (percentage < 95) {
        return '#660077';
      } if (percentage < 97) {
        return '#A52A2A';
      }
      return 'red';
    },
    contextmenuHandle() {

    },

  },

};
</script>
<style lang='scss' scoped>
#menu {
  // position: relative;
  height: 100%;
}

.el-menu {
  border: none;
}

.el-submenu {
  text-align: start;
}

.el-menu-item {
  width: 180px;
  text-align: start;
  overflow: hidden;
}

.el-menu-item:hover {
  background: #e2f2ff;
}

.menu-box {
  width: 100%;
  margin-bottom: 100px;
}

.menu-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 180px;
}

.delete {
  display: flex;
  align-items: center;
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  padding-left: 16px;
  cursor: pointer;

  .delete-spa {
    font-family: PingFang-SC-Regular;
    font-size: 12px;
    color: #697581;
  }
}

.delete-select {
  background: #e2f2ff;

  .delete-spa {
    color: #020233;
  }
}

.delete:hover {
  background: #e2f2ff;

  .delete-spa {
    color: #020233;
  }
}

.storage {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  padding: 16px 16px 0;

  .storage-mess {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
}
</style>
